<script lang="ts">
import 'swiper/css';
import 'swiper/css/pagination';
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import { footPrintStore, followDesignerStore, footPrintsStore } from '../stores/userInfo'
import router from '@/router';
import { computed } from 'vue';
import { informationStore } from '../stores/information'
export default {
    components: {
        Swiper,
        SwiperSlide,
    },
    setup() {
        let followDesigner = followDesignerStore().$state.followDesignerStore
        let footPrint = footPrintStore().$state.footPrint
        let footriint = footPrintsStore().$state.footPrints

        let user = informationStore().$state.information;
        console.log(user);
        

        let num = computed(() => {
            return footPrint.length + footriint.length;
        })

        let goPage = (path: any) => {
            router.push(path);
        }
        return {
            modules: [Pagination],
            user,
            footPrint,
            num,
            followDesigner,
            goPage
        }
    }
}
</script>
<template>
    <div class="UserCenter">
        <header class="UserCenter-Header">
            <!-- 顶部功能区 -->
            <div class="tool">
                <div class="Header-Icon">
                    <van-icon name="setting-o" />
                </div>
            </div>
            <!-- 用户信息 -->
            <div class="UserCom" @click="goPage('/conter')">
                <div class="UserImg">
                    <img :src='user.toux.content || user.toux'>
                </div>
                <div class="Username">
                    <h3>{{ user.nic }}</h3>
                </div>
                <div class="UserHomePage">

                </div>
            </div>
            <!-- 用户信息摘要 -->
            <div class="InformationSummary">
                <div class="my-care" @click="$router.push({ path: '/MyFollowView' })">
                    <h3>{{ followDesigner.length }}</h3>
                    <p>关注</p>
                </div>
                <!-- <div class="my-BeingFollowed">
                    <h3>0</h3>
                    <p>被关注</p>
                </div> -->
                <div class="my-care">
                    <h3>0</h3>
                    <p>获赞与收藏</p>
                </div>
                <div class="my-care" @click="$router.push({ path: '/FootprintView' })">
                    <h3>{{ num }}</h3>
                    <p>足迹</p>
                </div>
            </div>
            <!-- 用户界面广告图 -->
            <swiper :pagination="true" :modules="modules" :loop="true" class="UserInfomercial">
                <swiper-slide v-for="num in 6" :key="num">
                    <div class="InfomercialBox">
                        <img src="../assets/images/UserCenter/MKBTODAKTEKKWAABAAAAABY8.jpg">
                    </div>
                </swiper-slide>
            </swiper>
        </header>
        <div class="UserCenter-Body">
            <div class="IndexAbilityBox">
                <div class="User-abilityBox">
                    <div class="ability">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/ic_note_belong_article.png">
                        </div>
                        <p>发布整屋</p>
                    </div>
                    <div class="ability" @click="goPage('/Rreleasers')">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/ic_note_belong_diary.png">
                        </div>
                        <p>文章</p>
                    </div>
                    <div class="ability" @click="goPage('/diary')">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/ic_user_draft.png">
                        </div>
                        <p>草稿箱</p>
                    </div>
                    <div class="ability" @click="$router.push({ path: '/MyLikeRecord' })">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/lishidingdan.png">
                        </div>
                        <p>历史订单</p>
                    </div>
                    <div class="ability" @click="$router.push({ path: '/RemarkView' })">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/icon_company_consult.png">
                        </div>
                        <p>我的评论</p>
                    </div>
                </div>
                <div class="User-OtherAbilityBox">
                    <div class="ability">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/icon_tab5_help_01.png">
                        </div>
                        <p>好好住课堂</p>
                    </div>
                    <div class="ability">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/icon_tab5_help_02.png">
                        </div>
                        <p>新手攻略</p>
                    </div>
                    <div class="ability">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/icon_tab5_help_03.png">
                        </div>
                        <p>申请认证</p>
                    </div>
                    <div class="ability">
                        <div class="ability-Icon">
                            <img src="../assets/images/UserCenter/icon_tab5_help_04.png">
                        </div>
                        <p>帮助与反馈</p>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>
<style lang="scss" scoped>
.UserCenter {
    height: 92vh;
    background: #f5f5f5;

    .UserCenter-Header {
        padding: 0 10px;
        background-image:
            linear-gradient(217deg, #f6f7e9, rgba(255, 0, 0, 0) 70.71%),
            linear-gradient(127deg, #d1f3f5, rgba(0, 255, 0, 0) 70.71%),
            linear-gradient(336deg, #f5f5f5, rgba(0, 0, 255, 0) 70.71%);

        .tool {
            height: 45px;
            display: flex;
            align-items: center;
            flex-direction: row-reverse;

            .Header-Icon {
                display: flex;
                margin-right: 8px;

                i {
                    font-size: 20px;
                    color: #8c8c8c;
                }
            }
        }

        .UserCom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;

            .UserImg {
                width: 58px;
                height: 58px;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 10px;
                outline: 3px solid #fff;

                img {
                    object-fit: cover;
                }
            }

            .Username {
                flex: 1;

                h3 {
                    font-size: 16px;
                    font-weight: bold;
                }
            }

            .UserHomePage {
                font-size: 12px;
                color: #5f5f5f;
            }

        }

        .InformationSummary {
            display: flex;
            height: 66px;
            align-items: center;

            >div {
                flex: 1;
                display: flex;
                flex-direction: column;
                align-items: center;
                border-right: 1px solid #5f5f5f08;

                &:last-child {
                    border: none;
                }

                h3 {
                    font-size: 16px;
                }

                p {
                    font-size: 13px;
                    color: #5f5f5f;
                }
            }
        }

        :deep(.UserInfomercial) {
            border-radius: 8px;
            overflow: hidden;

            .swiper-slide {
                height: 80px;
            }

            .swiper-pagination {
                bottom: 2%;

                .swiper-pagination-bullet {
                    height: 2px;
                    width: 10px;
                    border-radius: 0;
                }

                .swiper-pagination-bullet-active {
                    background: #2aa59a;
                }
            }
        }
    }

    .UserCenter-Body {
        margin: 0 10px;

        .IndexAbilityBox {
            >div {
                display: flex;
                padding: 4px 10px;
                flex-wrap: wrap;
                background: #fff;
                border-radius: 6px;
                margin-top: 10px;

                .ability {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    margin: 8px 0;
                    width: 25%;

                    &:first-child {
                        margin-left: 0;
                    }

                    .ability-Icon {
                        width: 28px;
                        height: 28px;
                    }

                    p {
                        font-size: 12px;
                    }
                }
            }
        }
    }
}
</style>